<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
	<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>

	<style type="text/css">
		.component-fade-enter, .component-fade-leave-to{
			opacity: 0;
			transform: translateY(100px);
		}
		.component-fade-enter-active, .component-fade-leave-active{
			transition: all 2s ease;
		}
	</style>
</head>
<body>
<div id="test">
	<!--	模版挂载在哪里，data和方法就写在哪里		-->
	<!--			<username v-if="islogin"></username>-->
	<!--			<login v-else></login>-->
	<transition name="component-fade" mode="out-in">
		<component :is="viewname"></component>
	</transition>

	<input v-if="islogin" type="button" value="logout" @click="logout">
	<input v-else type="button" value="login" @click="login">
</div>
<template id="tpl-username">
	<div>
		<h1>{{username}}</h1>
		<h1>王子元真是太棒了！</h1>
	</div>
</template>
<template id="tpl-login">
	<div>
		<h1>请登录吧！</h1>
	</div>
</template>
<script>
	let username = {
		template: '#tpl-username',
		data(){
			return {
				username:'wangziyaun'
			}
		}
	}
	let login = {
		template: '#tpl-login'
	}
	let vue = new Vue({
		el:'#test',
		data:{
			msg:"王子元有一个充满智慧的大脑瓜",
			islogin: false,
			viewname:""
		},
		methods:{
			login(){
				this.islogin = true;
				console.log("login");
				this.viewname = "username"
			},
			logout(){
				this.islogin = false;
				console.log("logout");
				this.viewname = "login"
			}
		},
		components:{
			username,
			login
		}
	})
</script>
</body>
</html>
